<template>
  <div class="test">
    <div class="testtop">
      <em @click="goback"></em><span>心理测试</span>
      <van-search
        v-model="value"
        shape="round"
        background="#fff"
        placeholder="抑郁测试"
      />
      <a href=""
        ><img
          src="http://121.41.11.36:3000/images/ceshier/icon02.png"
          alt=""
        /><i>我的测评</i></a
      >
    </div>
    <div class="lunbo">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          ><img
            src="https://img.ydlcdn.com/file/2020/05/27/1d14760847e9a13330ac7d5a88342970.jpg"
            alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img
            src="https://img.ydlcdn.com/file/2020/06/11/8eea953c5ba3fe074daa0160e935c5b5.jpg"
            alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img
            src="https://img.ydlcdn.com/file/2020/12/08/1dcc7c53e64a9c4819238e0984258706.jpg"
            alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <ul class="iconli">
      <li v-for="item in iconlist" :key="item.title">
        <img :src="item.log" alt="" /><span>{{ item.title }}</span>
      </li>
    </ul>
    <div class="pingu">
      <p>
        <img src="http://121.41.11.36:3000/images/ceshier/icon11.png" alt="" />
        用户彬**刚刚测试了<a href="">专业心理评估</a>
      </p>
    </div>
    <div class="ceshi1">
      <h2>每日推荐 <span>一天一测，保持快乐</span></h2>
      <ul v-if="ceshidata">
        <li v-for="(item, index) in arr1" :key="index">
          <img :src="item.img" alt="" />
          <h3>{{ item.title }}</h3>
          <div>
            <em></em><span>{{ item.num }}万人测试过</span
            ><button>立即测试</button>
          </div>
        </li>
      </ul>
      <button class="anniuchange" @click="datachange">换一换</button>
    </div>

    <div class="ceshi2" v-if="ceshidata">
      <h2>精选测试<span>愿你在这里找到自我</span></h2>
      <div class="imgbox">
        <img src="http://121.41.11.36:3000/images/ceshier/img05.png" alt="" />
      </div>
      <ul>
        <li v-for="(item, index) in ceshidata[1].sec" :key="index">
          <img :src="item.img" alt="" />
          <div class="you">
            <h4>{{ item.title }}</h4>
            <p>{{ item.smatitle }}</p>
            <div>
              <em></em><span>{{ item.num }}万人测试过</span
              ><button>立即测试</button>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="ceshi3">
      <div class="imgbox">
        <img
          src="https://img.ydlcdn.com/file/2020/06/11/ca6rlagesuz083f6.jpg"
          alt=""
        />
      </div>
      <ul v-if="ceshidata">
        <li v-for="(item, index) in ceshidata[2].thr" :key="index">
          <div class="you">
            <h4>{{ item.title }}</h4>
            <p>{{ item.smatitle }}</p>
            <div>
              <em></em><span>{{ item.num }}万人测试过</span>
            </div>
          </div>
          <img :src="item.img" alt="" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref, computed, reactive, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  setup() {
    const start = ref(0);
    const end = ref(4);
    const iconlist = reactive([
      {
        log: "http://121.41.11.36:3000/images/ceshier/icon03.png",
        title: "情感",
      },
      {
        log: "http://121.41.11.36:3000/images/ceshier/icon04.png",
        title: "人际",
      },
      {
        log: "http://121.41.11.36:3000/images/ceshier/icon05.png",
        title: "性格",
      },
      {
        log: "http://121.41.11.36:3000/images/ceshier/icon06.png",
        title: "健康",
      },
      {
        log: "http://121.41.11.36:3000/images/ceshier/icon07.png",
        title: "亲子",
      },
      {
        log: "http://121.41.11.36:3000/images/ceshier/icon08.png",
        title: "能力",
      },
      {
        log: "http://121.41.11.36:3000/images/ceshier/icon09.png",
        title: "职业",
      },
      {
        log: "http://121.41.11.36:3000/images/ceshier/icon10.png",
        title: "精选",
      },
    ]);

    const store = useStore();

    let ceshidata = computed(() => store.state.ceshi.ceshidata);
    // let arr1 = ceshidata.value;

    const arr1 = computed(() => {
      return ceshidata.value
        ? ceshidata.value[0].first.slice(start.value, end.value)
        : null;
    });

    const datachange = () => {
      start.value += 4;
      end.value += 4;
      if (start.value >= 8) {
        start.value = 0;
        end.value = 4;
      }
    };
    const fn = () => {
      store.dispatch("getceshidaasync");
    };

    // 添加点击回退事件
    const router = useRouter();
    const goback = () => {
      router.go(-1);
    };
    onMounted(() => {
      fn();
    });
    return {
      iconlist,
      reactive,
      ceshidata,
      fn,
      arr1,
      datachange,
      goback,
    };
  },
};
</script>

<style lang="less">
.test {
  width: 100%;
  height: 100%;
  background: #fff;
  font-family: PingFang SC;
}
.testtop {
  height: 64px;
  display: flex;
  align-items: center;
  font-weight: bold;
  em {
    width: 22px;
    height: 22px;
    display: inline-block;
    background: url(http://121.41.11.36:3000/images/ceshier/icon01.png);
    background-size: 22px 22px;
    margin-left: 12px;
  }
  span {
    font-size: 17px;
    color: #353537;
    margin-left: 5px;
    // font-weight: bold;
  }
  a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 14px;
    font-size: 9px;

    font-weight: bold;
    color: #242424;
    img {
      width: 22px;
      height: 22px;
    }
  }
}
.lunbo {
  img {
    width: 331px;
    height: 140px;
    margin: 15px 22px;
    border-radius: 15px;
  }
}
.van-search {
  //搜素框样式
  width: 190px;
  height: 32px;
}
.iconli {
  height: 134px;
  width: 100%;
  background: white;
  li {
    width: 25%;
    height: 51px;
    float: left;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    color: #2a2a2a;
    img {
      width: 30px;
      height: 30px;
    }
  }
}
.pingu {
  width: 100%;
  height: 36px;
  background: #fafafa;
  line-height: 36px;
  text-align: center;
  font-size: 12px;
  img {
    width: 20px;
    height: 20px;
  }
  a {
    color: #0497eb;
  }
}
.ceshi1 {
  // padding-left: 12px;
  padding: 9px 0 0 12px;
  ul {
    width: 100%;
    height: 100%;
  }
  h2 {
    font-size: 17px;
    font-weight: bold;
    color: #1a1a1a;
    line-height: 42px;

    span {
      float: right;
      font-size: 12px;
      font-weight: bold;
      color: #696969;
      margin-right: 14px;
    }
  }
  li {
    width: 50%;
    float: left;
    // margin-left: 4px;

    img {
      width: 172px;
      height: 84px;
    }
    h3 {
      font-size: 15px;
      font-weight: bold;
      color: #2d2d2d;
      line-height: 35px;
    }
    div {
      white-space: nowrap;
      height: 46px;
      em {
        display: inline-block;
        width: 10px;
        height: 10px;
        background: url(http://121.41.11.36:3000/images/ceshier/icon12.png);
        background-size: 100% 100%;
      }
      span {
        font-size: 11px;
        font-weight: bold;
        color: #5f5f5f;
        margin-left: 7px;
      }
      button {
        width: 71px;
        height: 25px;
        background: #e7f5fe;
        border-radius: 12px;
        border: none;
        font-size: 12px;
        font-weight: bold;
        color: #0793f2;
        // margin-left: 6px;
      }
    }
  }
  .anniuchange {
    width: 343px;
    height: 40px;
    background: #f5f5f5;
    border-radius: 5px;
    text-align: center;
    border: none;
    font-weight: bold;
    color: #0197eb;
    font-size: 13px;
    margin-top: 2px;
  }
}
.ceshi2 {
  padding-top: 14px;
  h2 {
    line-height: 44px;
    font-size: 17px;
    font-weight: bold;
    color: #1a1a1a;
    margin: 0 15px;
    span {
      font-size: 12px;
      font-weight: bold;
      color: #696969;
      float: right;
    }
  }
  .imgbox {
    width: 100%;
    img {
      display: block;
      width: 349px;
      height: 134px;
      margin: 0 auto;
    }
  }
  li {
    height: 126px;
    padding: 22px 0 22px 26px;
    display: flex;
    flex-direction: row;
    img {
      width: 84px;
      height: 84px;
    }
    .you {
      margin-left: 14px;
      h4 {
        font-size: 17px;
        font-family: PingFang SC;
        color: #2d2d2d;
        line-height: 23px;
      }
      p {
        font-size: 13px;
        color: #989898;
        font-weight: bold;
      }
      div {
        margin-top: 15px;
        em {
          display: inline-block;
          width: 10px;
          height: 10px;
          background: url(http://121.41.11.36:3000/images/ceshier/icon12.png);
          background-size: 100% 100%;
        }
        span {
          font-size: 11px;
          font-weight: bold;
          color: #5f5f5f;
          margin-left: 7px;
        }
        button {
          width: 71px;
          height: 25px;
          background: #e7f5fe;
          border-radius: 12px;
          border: none;
          font-size: 12px;
          font-weight: bold;
          color: #0793f2;
          // margin-left: 6px;
          margin-left: 60px;
        }
      }
    }
  }
}
.ceshi3 {
  margin-top: 20px;
  .imgbox {
    width: 100%;
    img {
      display: block;
      width: 349px;
      height: 49px;
      margin: 0 auto;
    }
  }
  ul {
    margin-top: 8px;
    li {
      height: 126px;
      padding: 22px 13px 22px 26px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      img {
        width: 84px;
        height: 84px;
      }
      .you {
        // margin-left: 14px;
        h4 {
          font-size: 17px;
          font-family: PingFang SC;
          color: #2d2d2d;
          line-height: 23px;
        }
        p {
          font-size: 13px;
          color: #989898;
          font-weight: bold;
        }
        div {
          margin-top: 15px;
          em {
            display: inline-block;
            width: 10px;
            height: 10px;
            background: url(http://121.41.11.36:3000/images/ceshier/icon12.png);
            background-size: 100% 100%;
          }
          span {
            font-size: 11px;
            font-weight: bold;
            color: #5f5f5f;
            margin-left: 7px;
          }
        }
      }
    }
  }
}
</style>
